<template>
  <div class="login-wrap">
    <div class="form-wrapper">
      <div class="header">
        快腿，欢迎加入
      </div>
      <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
        <div class="input-wrapper">
          <div prop="userName" label="用户名" :class="{ 'is-error': registerError }" class="border-wrapper">
            <input v-model="registerForm.userName" autocomplete="off" placeholder="请输入用户名" class="border-item" />
          </div>
          <div prop="password" label="密码" :class="{ 'is-error': registerError }" class="border-wrapper">
            <input v-model="registerForm.password" autocomplete="off" type="password" placeholder="请输入密码"
              class="border-item" />
          </div>
          <div class="action">
            <div class="btn" type="primary" @click="handleRegister">注册</div>
          </div>
        </div>
          <div class="register-form-botton">
            <p>已有账号？<router-link to="/">立即登录</router-link></p>
          </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'zhuce',
  data() {
    return {
      registerForm: {
        userName: '',
        password: ''
      },
      registerRules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      registerError: false
    }
  },
  methods: {
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          const { userName, password } = this.registerForm
          axios.post('/api/register', { userName, password })
            .then(response => {
              if (response.data.success) {
                this.$message.success('注册成功')
                this.$router.push('/')
              } else {
                this.$message.error(response.data.message)
                this.registerError = true
              }
            })
            .catch(error => {
              console.error(error)
              this.$message.error('注册失败')
              this.registerError = true
            })
        } else {
          this.registerError = true
        }
      })
    }
  }
}
</script>


<style scoped>
.login-wrap {
    height: 1000px;
    font-family: JetBrains Mono Medium;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #0e92b3; */
    background: url('../assets/img/bg2.png');
    background-size: 100% 100%;
}

.form-wrapper {
    width: 300px;
    background-color: rgba(41, 45, 62, 0.8);
    color: #fff;
    border-radius: 2px;
    padding: 50px;
}

.form-wrapper .header {
    text-align: center;
    font-size: 35px;
    text-transform: uppercase;
    line-height: 100px;
}

.form-wrapper .input-wrapper input {
    background-color: rgb(41, 45, 62);
    border: 0;
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: #fff;
    outline: none;
}

.form-wrapper .input-wrapper input::placeholder {
    text-transform: uppercase;
}

.form-wrapper .input-wrapper .border-wrapper {
    background-image: linear-gradient(to right, #e8198b, #0eb4dd);
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-wrapper .input-wrapper .border-wrapper .border-item {
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    border-radius: 30px;
}

.form-wrapper .action {
    display: flex;
    justify-content: center;
}

.form-wrapper .action .btn {
    width: 60%;
    text-transform: uppercase;
    border: 2px solid #0e92b3;
    text-align: center;
    line-height: 50px;
    border-radius: 30px;
    cursor: pointer;
}

.form-wrapper .action .btn:hover {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.form-wrapper .icon-wrapper {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 1px dashed rgb(146, 146, 146);
    padding: 20px;
}

.form-wrapper .icon-wrapper i {
    font-size: 20px;
    color: rgb(187, 187, 187);
    cursor: pointer;
    border: 1px solid #fff;
    padding: 5px;
    border-radius: 20px;
}

.form-wrapper .icon-wrapper i:hover {
    background-color: #0e92b3;
}
</style>